<template>
  <a-card :bordered="false">
    <a-row :gutter="24">
      <a-col :md="4">
        <div class="table-operator">
          <div style="border-color: #0077AA">
            <a-dropdown :trigger="['contextmenu']">
              <a-tree @select="onSelect" :treeData="treeData" :selectedKeys="selectedKeys" @rightClick="rightClick">
              </a-tree>
              <a-menu slot="overlay" v-action:category:save>
                <a-menu-item key="1" @click="createCate">
                  <a-icon type="folder-add" />
                  <span>创建子栏目</span>
                </a-menu-item>

                <a-menu-item key="2" @click="handleDelete(rightItem)">
                  <a-icon type="file-add" />
                  <span>删除栏目</span>
                </a-menu-item>

                <a-menu-item key="4" v-if="rightItem.id==='0'" @click="initTreeCategory">
                  <a-icon type="reload" />
                  <span>刷新栏目</span>
                </a-menu-item>

                <!-- <a-menu-item key="5" v-if="rightItem.id==='0'">
                  <a-icon type="reload" />
                  <span>重置栏目</span>
                </a-menu-item> -->

              </a-menu>
            </a-dropdown>
          </div>
        </div>
      </a-col>
      <a-col :md="20">
        <p style="color: red;">PS:栏目操作请右键点击左侧栏目</p>
        <s-table
          ref="table"
          size="small"
          bordered
          rowKey="id"
          :columns="columns"
          :data="loadData"
          :locale="{emptyText: '暂无子栏目'}">
          <span slot="action" slot-scope="text, record">
            <template>
              <a-tag color="orange" v-action:category:edit @click="handleEdit(record)" >编辑</a-tag>
              <a-tag color="red" v-action:category:del @click="handleDelete(record)">删除</a-tag>
              <a-tooltip placement="top">
                <template slot="title">
                  <span>重新生成栏目静态化列表</span>
                </template>
                <a-tag color="green" v-action:category:static v-if="!record.onlyUrl" @click="reStaticFile(record)">静态化</a-tag>
              </a-tooltip>

              <a-tooltip placement="top">
                <template slot="title">
                  <span>指定该栏目不同的动作配置不同的策略管理</span>
                </template>
                <a-tag color="blue" @click="strategyConfig(record)">策略管理</a-tag>
              </a-tooltip>
            </template>
          </span>
          <span slot="categoryExtendId" slot-scope="text">
            <template>
              <a-tag color="green" v-if="text">是</a-tag>
              <a-tag color="red" v-if="!text">否</a-tag>
            </template>
          </span>
          <span slot="hidden" slot-scope="text">
            <template>
              <a-tag color="red" v-if="text">否</a-tag>
              <a-tag color="green" v-if="!text">是</a-tag>
            </template>
          </span>
          <span slot="allowContribute" slot-scope="text">
            <template>
              <a-tag color="green" v-if="text">是</a-tag>
              <a-tag color="red" v-if="!text">否</a-tag>
            </template>
          </span>
          <span slot="cname" slot-scope="text">
            <template>
              <span v-html="$substr(text,5)"></span>
            </template>
          </span>
        </s-table>
      </a-col>
    </a-row>

    <handle ref="handle" @ok="handleOk"></handle>
    <strategy ref="strategy"></strategy>
  </a-card>
</template>

<script>
  import {
    treeCategory,
    delByPk,
    page,
    genCategory
  } from '@/api/site/category'
  import handle from './handle'
  import strategy from './strategy'
  import {
    STable
  } from '@/components'
  // import notifySocket from '@/components/NotifySocket/NotifySocket.vue'
  export default {
    name: 'TableList',
    components: {
      STable,
      handle,
      strategy
    },
    props: {
      statusFilter: {
        type: Function,
        default: undefined
      }
    },
    data () {
      return {
        mdl: {},
        advanced: false,
        treeData: [],
        selectedKeys: ['0'],
        rightItem: {},
        dropdownVisible: false,
        queryParam: {
          dto: {}
        },
        columns: [{
            title: '栏目名称',
            dataIndex: 'name',
            scopedSlots: {
              customRender: 'cname'
            }
          },
          {
            title: '父栏目',
            dataIndex: 'parentName'
          },
          {
            title: '栏目编码',
            dataIndex: 'code'
          },
          {
            title: '排序',
            dataIndex: 'sort'
          },
          {
            title: '栏目模型',
            dataIndex: 'categoryExtendId',
            scopedSlots: {
              customRender: 'categoryExtendId'
            }
          },
          {
            title: '前台显示',
            dataIndex: 'hidden',
            scopedSlots: {
              customRender: 'hidden'
            }
          },
          {
            title: '允许投稿',
            dataIndex: 'allowContribute',
            scopedSlots: {
              customRender: 'allowContribute'
            }
          },
          {
            title: '操作',
            dataIndex: 'action',
            width: '350px',
            scopedSlots: {
              customRender: 'action'
            }
          }
        ],
        loadData: parameter => {
          return page(Object.assign(parameter, this.queryParam)).then(
            response => {
              if (response.code === 0) {
                 return response.res
              } else {
                 return { total: 0, rows: [] }
              }
            }
          )
        }
      }
    },
    created () {
      this.initTreeCategory()
    },
    methods: {
      initTreeCategory () {
        treeCategory().then(response => {
          if (response.code === 0) {
            this.treeData = [response.res]
          }
        })
      },
      onSelect (selectedKeys, e) {
        if (e.selected) {
           this.selectedKeys = selectedKeys
        }
        this.queryParam.dto.parentId = e.node.dataRef.id
        this.$refs.table.refresh()
      },
      rightClick (e) {
        this.selectedKeys = [e.node.eventKey]
        this.rightItem = e.node.dataRef
        this.dropdownVisible = true
        this.onSelect(this.selectedKeys, e)
      },
      strategyConfig (record) {
         this.$refs.strategy.add(record)
      },
      reStaticFile (record) {
        genCategory({ id: record.id }).then(response => {
           if (response.code === 0) {
              this.$message.info('请稍后~')
           } else {
              this.$message.error(response.msg)
           }
        })
      },
      createCate () {
        this.$refs.handle.add(this.rightItem)
      },
      handleDelete (record) {
        const that = this
        this.$confirm({
          title: '操作提醒',
          content: '确定要删除吗?',
          onOk () {
            delByPk({
              id: record.id
            }).then(response => {
              that.handleOk()
              that.$message.info(response.msg)
            }).catch((response) => {
              that.$message.warn(response.msg)
            })
          },
          onCancel () {}
        })
      },
      handleEdit (record) {
        this.$refs.handle.edit(record)
      },
      handleOk () {
        this.$refs.table.refresh()
        this.initTreeCategory()
      },
      resetSearchForm () {
        this.queryParam = {
          dto: {}
        }
        this.handleOk()
      }
    }
  }
</script>
